<template>
	<view style="position: relative;">
		<u-toast ref="uToast"></u-toast>
		<view class="m-box">
			<scroll-view style="height: calc(100vh - 30px);background-color: #ededed;" class="scroll-Y" ref="sro"
				id="sro" @scrolltolower="getCommentList(false)" scroll-y="true" :scroll-top="scrollTop">
				<view class="t-box">
					<view class="wrap" @click="previewPictrue">
						<u-swiper :list="list" height="500" @click="previewPictrue"></u-swiper>
					</view>
					<view class="t-title">{{info.title}}</view>
				</view>
				<view class="c-box">
					<view class="c-t-box">
						<view>
							<image class="head-img" :src="info.userAvatar">
							</image>
						</view>
						<view class="c-t-text-box">
							<view style="font-weight: bold;">{{info.userName}}</view>
							<view style="display: flex;margin-top: 8px;color: #ababab;">
								<view>
									<image style="width: 16px; height: 16px;margin-right: 4px;"
										src="/static/imgs/map.png">
									</image>
								</view>
								<view>{{info.areaName}}</view>
							</view>
						</view>
					</view>
					<!-- <view style="display: flex;margin-top: 20px;">
					<view style="width: 120px;margin-right: 10px;">
						<u-button size="default" :custom-style="customStyle1" shape="circle">沟通报价</u-button>
					</view>
					<view style="width: 120px;margin-right: 10px;">
						<u-button size="default" :custom-style="customStyle2" shape="circle">担保交易</u-button>
					</view>
					<view style="width: 120px;">
						<u-button size="default" :custom-style="customStyle3" shape="circle">申请赔付</u-button>
					</view>
				</view> -->
					<view style="display: flex;margin-top: 25px;">
						<view>
							<image style="height: 20px;width: 20px;margin-right: 2px;" src="/static/imgs/dunpai.png">
							</image>
						</view>
						<view style="color: #2dbdad;font-size: 13px;font-weight: bold;margin-top: 2px;">
							诚信从我做起，本人支持大家使用平台的担保交易!</view>
					</view>
				</view>
				<view class="c-c-box">
					<view>
						<view style="font-weight: bold;margin-top: 20px;">基本服务</view>
						<view style="margin-top: 10px;">{{info.content1}}</view>
					</view>
					<view>
						<view style="font-weight: bold;margin-top: 20px;">擅长服务</view>
						<view style="margin-top: 10px;">{{info.content2}}</view>
					</view>
					<view>
						<view style="font-weight: bold;margin-top: 20px;">售后保证</view>
						<view style="margin-top: 10px;">{{info.content3}}
						</view>
					</view>
				</view>
				<view class="c-p-box">
					<view>全部评论</view>
					<view style="margin-top: 25px;display: flex;justify-content: space-between;width: 220px;"
						v-for="(item,index) in rateList" :key="index">
						<view style="margin-right: 30px;">{{item.title}}</view>
						<view>
							<u-rate :count="item.count" v-model="item.value" :disabled="true"
								active-color="#ffc200"></u-rate>
						</view>
					</view>
					<view class="c-p-list" v-for="(item,index) in infoList" :key="index">
						<view>
							<image class="head-img" :src="item.userAvatar">
							</image>
						</view>
						<view class="c-t-text-box">
							<view style="color: #ababab;">{{item.userName}}</view>
							<view style="margin-top: 8px;">{{item.content}}</view>
							<view style="margin-top: 8px;color: #ababab;">
								<view>{{item.createTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="b-box">
			<view style="display: flex;" @click="openRate">
				<view>
					<image style="height: 20px;width: 20px;margin-right: 10px;" src="/static/imgs/lianyan.png"></image>
				</view>
				<view>{{info.commentNum}}</view>
			</view>
			<view style="display: flex;">
				<view @click="addLike" v-if="!zanShow">
					<image style="height: 20px;width: 20px;margin-right: 10px;" src="/static/imgs/zan.png"></image>
				</view>
				<view v-if="zanShow">
					<image style="height: 20px;width: 20px;margin-right: 10px;" src="/static/imgs/zan_green.png">
					</image>
				</view>
				<view>{{info.likeNum}}</view>
			</view>
			<view style="position: relative;">
				<image style="height: 20px;width: 20px;margin-right: 10px;" src="/static/imgs/qufenx.png">
				</image>
				<button open-type="share" class="btn"></button>
			</view>
		</view>
		<view>
			<u-popup v-model="showRateBox" mode="bottom" :closeable="true" @close="closeRate">
				<view class="rate-box">
					<view style="margin-top: 25px;display: flex;justify-content: space-between;width: 220px;"
						v-for="(item,index) in commentRateList" :key="index">
						<view style="margin-right: 30px;">{{item.title}}</view>
						<view>
							<u-rate :count="item.count" v-model="item.value" active-color="#ffc200"></u-rate>
						</view>
					</view>
					<view class="pl-box">
						<textarea ref="myTxt" class="txt-box" placeholder="限评1次，请谨慎发表~" maxlength="-1"
							v-model="txtContent"></textarea>
					</view>
					<view style="margin-top: 30px;">
						<u-button @click="addComment()" :custom-style="customStyle" shape="circle"
							type="success">提交评论</u-button>
					</view>
				</view>

			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		orderApis
	} from '@/apis/index'
	export default {
		created() {
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			});
			//#endif
		},
		onLoad() {
			var _this = this
			_this.loadInfo()
		},
		onUnload() {
			//刷新订单列表页
			uni.$emit('orderFresh', true);
		},
		data() {
			return {
				userInfo: {},
				txtContent: '',
				scrollTop: 0,
				showRateBox: false,
				list: [],
				info: {},
				customStyle: {
					backgroundColor: '#009688'
				},
				customStyle1: {
					backgroundColor: '#ffa100',
					color: '#fff'
				},
				customStyle2: {
					backgroundColor: '#2dbdad',
					color: '#fff'
				},
				customStyle3: {
					backgroundColor: '#ff382e',
					color: '#fff'
				},
				rateAlert: {
					type: 'warning',
					title: "请给出评分!",
					duration: 4000,
				},
				contentAlert: {
					type: 'warning',
					title: "请填写评论!",
					duration: 4000,
				},
				rateList: [{
						title: '靠谱指数',
						count: 5,
						value: 2
					},
					{
						title: '性价比指数',
						count: 5,
						value: 2
					}, {
						title: '办事效率指数',
						count: 5,
						value: 2
					}
				],
				commentRateList: [{
						title: '靠谱指数',
						count: 5,
						value: 0
					},
					{
						title: '性价比指数',
						count: 5,
						value: 0
					}, {
						title: '办事效率指数',
						count: 5,
						value: 0
					}
				],
				zanNumber: 1,
				zanShow: false,
				infoList: [],
				pageSize: 10,
				pageNum: 1,
			}
		},
		methods: {
			addLike() {
				var _this = this

				let para = {
					serviceId: _this.info.id
				}

				orderApis.addLike(para).then((res) => {
					console.log(res)

					_this.submitZan()
				})
			},

			freshInfo() {
				var _this = this
				let param = {
					id: _this.info.id
				}

				orderApis.getOrderDetail(param).then((res) => {
					console.log(res)
					_this.info = res.data.data
					//清空评论列表
					_this.infoList = []

					_this.getInfo(true)
				})
			},

			loadInfo() {
				let info = uni.getStorageSync('orderDetail');
				this.info = info

				this.getInfo(true)
				
				var _that = this;
				_that.userInfo = _that.$store.state.wxUser;
			},

			// flag true 第一次进来  false 刷新信息
			getInfo(flag) {
				this.rateList[0].value = this.info.rateAvg1
				this.rateList[1].value = this.info.rateAvg2
				this.rateList[2].value = this.info.rateAvg3

				let list = []
				for (let url of this.info.imgUrls) {
					let image = {
						image: url
					}

					list.push(image)
				}

				this.list = list

				this.getCommentList(flag)
			},

			showToast(params) {
				this.$refs.uToast.show(params)
			},

			addComment() {
				let _this = this

				let rate1 = _this.commentRateList[0].value
				let rate2 = _this.commentRateList[1].value
				let rate3 = _this.commentRateList[2].value

				if (rate1 == 0 || rate2 == 0 || rate3 == 0) {
					_this.showToast(_this.rateAlert)

					return
				}

				if (!_this.$isNotNull(_this.txtContent)) {
					_this.showToast(_this.contentAlert)

					return
				}

				let para = {
					id: _this.info.commentId,
					content: _this.txtContent,
					rate1: rate1,
					rate2: rate2,
					rate3: rate3
				}

				orderApis.addComment(para).then((res) => {
					//刷新当前列表
					_this.freshInfo()

					_this.showRateBox = false
				})
			},
			getCommentList(flag) {
				var _this = this
				let jisuanHeight = 500
				if (flag) {
					_this.pageNum = 1
				} else {
					_this.pageNum++

					jisuanHeight = _this.pageNum * jisuanHeight
				}

				let para = {
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					pid: _this.info.commentId
				}

				orderApis.getCommentList(para).then((res) => {
					if (flag) {
						_this.infoList = res.data.data.rows
					} else {
						var list = res.data.data.rows
						var oldList = _this.infoList
						if (list.length != 0) {
							for (var i = 0; i < list.length; i++) {
								var data = list[i]
								oldList.push(data)
							}

							_this.infoList = oldList

							_this.scrollTop = jisuanHeight
						}
					}
				})
			},

			submitZan() {
				var _this = this
				_this.info.likeNum = _this.info.likeNum + 1
				_this.zanShow = true

				//清空记录
				setTimeout(function() {

					_this.zanShow = false
				}, 250)
			},
			openRate() {
				this.showRateBox = true
			},
			closeRate() {
				this.showRateBox = false
			},
			previewPictrue() {
				let urls = []
				for (var i = 0; i < this.list.length; i++) {
					urls.push(this.list[i].image)
				}

				wx.previewImage({
					urls: urls // 需要预览的图片http链接列表
				})
			},

			onShareAppMessage(res) {
				return {
					title: '企极立财税甩单圈,快来试试吧',
					// imageUrl: '../../static/imgs/pdf_zh.jpg',
					// path: '/pages/index/index?userId=' + this.userInfo.userId
					path: '/pages/index/index'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rate-box {
		height: 65vh;
		padding: 20px;
	}

	.wrap {
		padding: 40rpx;
	}

	.m-box {
		height: 100vh;
	}

	.t-box {
		background-color: white;
		padding-bottom: 20px;
	}

	.t-title {
		margin-left: 20px;
		font-size: 13px;
		font-weight: bold;
		line-height: 26px;
	}

	.c-box {
		margin-top: 2px;
		background-color: white;
		padding: 20px 20px 10px 20px;
	}

	.c-t-box {
		display: flex;
	}

	.head-img {
		height: 40px;
		width: 40px;
		border-radius: 20px;
	}

	.c-t-text-box {
		font-size: 13px;
		margin-left: 10px;
	}

	.b-box {
		color: #ababab;
		display: flex;
		height: 70px;
		justify-content: space-around;
		position: absolute;
		bottom: 0px;
		width: 100%;
		align-items: center;
		// border: 1px solid red;
		background-color: #ededed;
	}

	.c-c-box {
		padding: 1px 20px 10px 20px;
		font-size: 13px;
		background-color: white;
		margin-top: 10px;
	}

	.c-p-box {
		margin-top: 10px;
		padding: 20px;
		background-color: white;
		// height: 50vh;
		padding-bottom: 70px;
	}

	.c-p-list {
		margin-top: 30px;
		padding-bottom: 10px;
		border-bottom: solid #ededed 1px;
		display: flex;
	}

	.pl-box {
		margin-top: 25px;
	}

	.txt-box {
		line-height: 40rpx;
		padding-top: 10rpx;
		padding-left: 2%;
		padding-right: 2%;
		font-size: 14px;
		// margin-left: 1%;
		width: 94%;
		// background-color: #ededed;
		border-radius: 10rpx;
		height: 200px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
	}

	.btn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		background-color: transparent;
		border: none;
	}
</style>